/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="heads"  v-bind:style="getStyle">
    <img :src="name ? name : require('../../..//static/img/testImage/2.jpeg')" :style="{'width': width+'px', 'height': width+'px'}" alt="">
  </div>
</template>

<script>

export default {
  props: {
    name: {
      type: String,
      required: true,
      default: "名称"
    },
    width: Number,
    size: Number
  },
  computed: {
    getStyle: function() {
      const w = this.width + "px";
      const s = this.size ? `${this.size}px` : "";
      return {
        width: w,
        height: w,
        "line-height": w,
        "border-radius": w,
        "font-size": s
      };
    }
  },
  data() {
    return {};
  },
  components: {
  }
};
</script>

<style lang='less' scoped>
@import "../../util/themt.less";

.heads {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 36px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  overflow: hidden;
  img{
    width: 36px;
    height: 36px;
  }
}
</style>
